<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	  <link rel="stylesheet" href="../static/src/lib/layui/css/layui.css"  media="all">
	  <script src="../static/src/layui/layui.js" charset="utf-8"></script>
	  <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
	</head>
	<body>
		<form id="phoneform" class="layui-form" style="margin-top:10%;margin-left:30%;
		background-color:white;
		    height: 180px;
		    width:400px;
		    padding: 50px;
		    border-radius:15px;">
		  
		  <div class="layui-form-item">
		  	<label class="layui-form-label">原密码</label>
		  	<div class="layui-input-block"> <!-- onkeyup="value=value.replace(/^(0-)|[^\d]+/g,'')" 这个是纯数字的正则--> 
		  		<input type="text" maxlength="12" oninput="myFunction()" id="mima1"    name="mima1" required lay-verify="required" placeholder="请输入有效长度且不含空格" autocomplete="off" class="layui-input">
		  	</div>
		  </div>
		    <div id="msg" style="margin-left: 40px"></div>
		  </div>
		  
		  <div class="layui-form-item">
		  	<label class="layui-form-label">新密码</label>
		  	<div class="layui-input-block">
		  		<input type="text" maxlength="12" oninput="myFunctionTwo()" id="mima2"    name="mima2" required lay-verify="required" placeholder="请输入有效长度且不含空格" autocomplete="off" class="layui-input">
		  	</div>
		  </div>
		  
		  <div class="layui-form-item">
		  	<label class="layui-form-label">重复新密码</label>
		  	<div class="layui-input-block">
		  		<input type="text" maxlength="12"  oninput="myFunctionThree()" id="mima3"    name="mima3" required lay-verify="required" placeholder="请输入有效长度且不含空格" autocomplete="off" class="layui-input">
		  	</div>
		  </div>
		  
		  <!--检验密码的正确性提示-->
		  <p id="tishi" style="margin-left: 120px; color: red;"></p>
		  
		   <div class="layui-form-item">
		    <label class="layui-form-label">验证码：</label>
		    <div class="layui-input-block">
		      <input id="pnum" type="text" oninput="myFunctionFour()"  maxlength="6" name="pnum" lay-verify="required" placeholder="请输入验证码" autocomplete="off" class="layui-input">
		   
		    </div>
		  </div>
		  <div class="layui-form-item">
		    <div class="layui-input-block">
		      
		      <input type="button" class="layui-btn" id="find"  value="点击获取验证码" /> 
		      <button class="layui-btn" lay-submit=""  id="tijiao" lay-filter="demo2" disabled="disabled">禁止提交</button>
		    </div>
		  </div>
		</form>
		
		
		<script>
		layui.use(['form', 'layedit', 'laydate','layer'], function(){
		  var form = layui.form
		  ,layer = layui.layer
		  ,layedit = layui.layedit
		  ,laydate = layui.laydate;
		  
		  $("#find").click(function() {
		      if($("#username").val()==''){
		          layer.msg("请填写正确用户名");
		          return false;
		      }
		      var obj=this;
		      $.ajax({
		          type:"post",
		          url:"http://www.baidu.com",
		          data:{
		              username:$("#username").val(),
		          },
		          dataType:"json",//返回的
		          success:function(data) {
		              
		              if(data.result){
		                  $("#find").addClass(" layui-btn-disabled");
		                  $('#find').attr('disabled',"true");
		                  settime(obj);
		                  $("#msg").text(data.msg);
		              }else{
		                  layer.msg(data.msg);
		              }
		          },
		          error:function(msg) {
		              console.log(msg);
		          }
		      }); 
		  });
		  //监听提交 并且判断密码长度是否够
		  	form.on('submit(demo2)', function(data) {
		  		
		  		// location.reload();
				var mLength1 = document.getElementById("mima1").value.length;
				var mLength2 = document.getElementById("mima2").value.length;
				var mLength3 = document.getElementById("mima3").value.length;
				var mFind = document.getElementById("pnum").value.length;
				var a = document.getElementById("mima1").value;
				var b = document.getElementById("mima2").value;
				var c = document.getElementById("mima3").value;
				var d = document.getElementById("pnum").value;
				if(mLength1<6 || mLength2 <6 || mLength3 <6 || mFind !=6 ||c==''||c.indexOf(' ')!=-1 ||a==''||a.indexOf(' ')!=-1 ||b==''||b.indexOf(' ')!=-1||d==''||d.indexOf(' ')!=-1 ){
					layer.msg("密码或验证码长度不够或密码或验证码中含有空格，请输出正确密码");
					}
		  		else{
					layer.msg(JSON.stringify(data.field));
				}
		  		return false;
		  	});
		});
		</script>
		
		<!--发送验证码的JS-->
		<script type="text/javascript"> 
		var countdown=120; 
		function settime(obj) { 
		if (countdown == 0) { 
		    obj.removeAttribute("disabled"); 
		    obj.classList.remove("layui-btn-disabled")
		    obj.value="获取验证码"; 
		    countdown = 60; 
		    return;
		} else { 
		    
		    obj.value="重新发送(" + countdown + ")"; 
		    countdown--; 
		} 
		setTimeout(function() { 
		    settime(obj) }
		    ,1000) 
		}
		</script>
		
		
	
		<!--密码检验的js-->
		<!--这是针对第一个密码框-->
		<script>
		function myFunction() {
			 var c = document.getElementById("mima1").value;
		    var x = document.getElementById("mima2").value;
			var a = document.getElementById("mima3").value;
			
			// var name=document.getElementById('mima1');
			// if(||c==''||c.indexOf(' ')!=-1){
			// alert('有空格或者为空！')；
			// }
			
			//alert("1");
			if(c==x || c==a){
		    document.getElementById("tishi").innerHTML = "新旧密码不能相同1";
			$("#tijiao").attr("disabled","disabled");
			 document.getElementById("tijiao").innerHTML="禁止提交";
		} 
			if(a==x&& x!=c && a!="" && x!=""){
			 document.getElementById("tishi").innerHTML = "密码正确";
				 $("#tijiao").removeAttr('disabled');
				  document.getElementById("tijiao").innerHTML="可以提交";
			
			}
			
		}
		<!--这是针对第二个密码框-->
			function myFunctionTwo() {
			 var c = document.getElementById("mima1").value;
		    var x = document.getElementById("mima2").value;
			var a = document.getElementById("mima3").value;
			//alert("1");
			if(c==x){
		    document.getElementById("tishi").innerHTML = "新旧密码不能相同2";
			$("#tijiao").attr("disabled","disabled");
			 document.getElementById("tijiao").innerHTML="禁止提交";
		} 
			if(a!=x){
			 document.getElementById("tishi").innerHTML = "两次密码不相同2";
			 $("#tijiao").attr("disabled","disabled");
			  document.getElementById("tijiao").innerHTML="禁止提交";
		}
			if(a==x && a!=c && x!=c){
				document.getElementById("tishi").innerHTML = "密码正确2";
				$("#tijiao").removeAttr('disabled');
				 document.getElementById("tijiao").innerHTML="可以提交";
			}
			if(c==a==x){
				 document.getElementById("tishi").innerHTML = "新旧密码不能相同2";
				 $("#tijiao").attr("disabled","disabled");
				  document.getElementById("tijiao").innerHTML="禁止提交";
			}
		
		}
		
		<!--这是针对第三个密码框-->
			function myFunctionThree() {
			 var c = document.getElementById("mima1").value;
		    var x = document.getElementById("mima2").value;
			var a = document.getElementById("mima3").value;
			//alert("1");
			if(c==a){
		    document.getElementById("tishi").innerHTML = "新旧密码不能相同3";
			$("#tijiao").attr("disabled","disabled");
			 document.getElementById("tijiao").innerHTML="禁止提交";
		} 
			if(c==a==x){
				 document.getElementById("tishi").innerHTML = "新旧密码不能相同3";
				 $("#tijiao").attr("disabled","disabled");
				  document.getElementById("tijiao").innerHTML="禁止提交";
			}	
			if(a!=x){
			 document.getElementById("tishi").innerHTML = "两次密码不相同3";
			 $("#tijiao").attr("disabled","disabled");
			  document.getElementById("tijiao").innerHTML="禁止提交";
		}
			if(a==x && a!=c){
				document.getElementById("tishi").innerHTML = "密码正确3";
				$("#tijiao").removeAttr('disabled');
				 document.getElementById("tijiao").innerHTML="可以提交";
			}
			if(c==a==x || a==c){
				 document.getElementById("tishi").innerHTML = "新旧密码不能相同3";
				 $("#tijiao").attr("disabled","disabled");
				  document.getElementById("tijiao").innerHTML="禁止提交";
				 // document.getElementById("input_id").disabled = false;
			}
		
		}
		</script>
		
	</body>
</html>
